import LazyLoad from 'react-lazyload'
import Link from 'next/link'

import Icon from 'antd/lib/icon';
import Rate from 'antd/lib/rate';
import Button from 'antd/lib/button';

import PlaceholderComponent from '../../Placeholder'
import ActiveTips from '../productItem/activetips'
import ProductPrice from './price'
import PictureList from './pictureList'
import ActiveTime from '../productItem/activetime'
import {
  scoreFormat
} from "../../../static/js/common"

export default ({product,skin,bottomPrice,btnLoading,favorited,showModal,storeProduct,changeMainImg,imgIndex})=>(
	<div className="showcase-item">
		<div className="showcase-left">
			{(product.discount||product.brokerage)?<ActiveTips skin={skin}  discount={product.discount} brokerage={product.brokerage||0} />:null}
			<Link  href={'/detail?itemId='+product.itemId} as={'/detail?itemId='+product.itemId} >
				<div className="showcase-pic-box">
					<LazyLoad offset={[-200, 0]} placeholder={<PlaceholderComponent />} >
			            <img className="showcase-pic pro-img-origin" src={product.imageList[imgIndex]||' '} />
			        </LazyLoad>
			        {
		              product.imageList&&product.imageList[1]?
		                <img className="showcase-pic pro-img-change" src={ (imgIndex < product.imageList.length - 1)?product.imageList[(imgIndex+1)]:product.imageList[0]}  alt="product"/>:
		                <img className="showcase-pic pro-img-reverse" src={product.image}  alt="product"/>
		            }
				</div>
	        </Link>
		</div>
		<div className="showcase-right">
			<div className="showcase-time">
				{(product.discount&&product.discount.duration>0)?<ActiveTime  skin={skin} time={product.discount.duration||0} />:null}
			</div>
			<div className="showcase-pname">
				<Link href={'/detail?itemId='+product.itemId} as={'/detail?itemId='+product.itemId}>
					<a><p className="product-name" title={product.name}>{product.name}</p></a>
		        </Link>
			</div>
			<div className="showcase-rate">
				{
                    product.comment?<Rate style={{fontSize:16}} allowHalf disabled defaultValue={scoreFormat(product.comment.avgscore) || 0} />:
                    <Rate style={{fontSize:16}} allowHalf disabled defaultValue={0} />
                }
                <span className="rate-reviews">{product.comment.avgscore} REVIEW(S)</span>
			</div>
			{
				product.imageList.length? <div className="showcase-piclist">
					<PictureList changeMainImg={changeMainImg} index={imgIndex} imageList={product.imageList} />
				</div>:null
			}
			<div className="showcase-price">
				<ProductPrice {...product} />
			</div>
			<div className="showcase-btn">
				<div className="btn-left">
					<Button size="large" loading={btnLoading} onClick={showModal} type="primary" style={{width:"100%",height:40}}>
	                    <Icon type="shopping-cart" style={{display:btnLoading?'none':''}} /><span>ADD TO CART</span>
	                </Button>
				</div>
				<div className="btn-right pro-oprate">
					<span className="icons">
	                  <Link href={{ pathname: '/detail', query: { itemId: product.itemId||' ' }}}>
	                    <a> <Icon type="eye-o" style={{ fontSize: 20,marginTop: 8 }}/> </a>
	                  </Link>
	                </span>
					
					<span onClick={storeProduct} className="icons">
	                  <Icon type={favorited?"heart":'heart-o'} style={{ fontSize: 16,marginTop: 10 }} />
	                </span>

	                
				</div>
				
			</div>
			
		</div>
	</div>
)